<template>
  <div class="fy-search-result-wrap"
       v-if="searchParams.dataInfo == null ? false : true">
    <div class="search-result-container">
      <div class="title">
        <span>{{title}}</span>
        <i :class="rightArrowIconClass"></i>
      </div>
      <div class="search-result-content">
        <ul>
          <li class="list-style"
              :key="index"
              @click="routeP(index, item)"
              v-for="(item, index) in dataList">
            <span>
              {{item}}
            </span>
            <i v-if="cacheList[index].isShow" :class="[cacheList[index].isShow ? 'close-icon' : '']"
               @click.stop="closeIcon(index)"></i>
            <i :class="rightArrowIconClass"
               v-if="index!==dataList.length-1"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import utils from '@bApi/util/utils'
import arrayToStringUtil from '@bApi/util/arrayToStringUtil'
import dateModeTransform from '@bApi/date/dateModeTransform'
export default {
  name: 'fySearchResult',
  props: {
    // 查询参数
    searchParams: {
      type: Object,
      default: function() {
        return {}
      },
    },
    title: {
      // 或许后面需求不是用户搜索结果展示，可以传入一个title
      type: String,
      default: '搜索结果',
    },
    icon: {
      // 启动icon图标显示，考虑到后期图标可能不需要，获取换图标
      // 留待扩展
      type: Boolean,
      default: false,
    },
    rightArrowIconClass: {
      // 用户可以自定义图标
      type: String,
      default: 'right-arrow-icon',
    },
    iconSize: {
      // icon 大小
      // 留待扩展
      // 默认12 , 可能有其他值 16，20
      type: Number,
      default: 12,
    },
    value: {
      type: Object,
      default: function() {
        return {}
      },
    },
    notAllowDeleteKeys: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      searchResultList: [],
      cacheList: [],
      searchParamsTemp: null,
    }
  },
  created() {
    this.initSearchParams(this.searchParams)
    this.searchParamsTemp = this.searchParams
    this.pushSearchResult(this.searchParamsTemp)
  },
  methods: {
    initSearchParams(searchParams) {
      // 页面一进来就修复数据成组件需要处理形式的数据, 新加方法
      // 添加 scopeKey
      // 添加 scopeStart
      // 添加 fieldEnname
      let dataInfo = searchParams['dataInfo']
      let fields = searchParams['fields']
      for(let key in dataInfo) {
        if(fields[key] && fields[key]['scopeKey'] !== 'backField') {
          // 深复制过去
          fields[fields[key].scopeKey] = JSON.parse(JSON.stringify(fields[key]))
          fields[fields[key].scopeKey]['scopeKey'] = 'backField'
          fields[fields[key].scopeKey]['scopeStart'] = key
          fields[key]['scopeStart'] = key
          fields[fields[key].scopeKey]['fieldEnname'] =  fields[key].scopeKey
        }
      }
    },
    closeIcon(index) {
      // 每点击一次删除一个元素
      // 处理 v-model 中的数据
      // 分发出去
      const retVal = this.closeSearchRestult(index)
      this.handleCloseIcon(retVal)
      this.$emit('close-icon', { index, retVal })
    },
    routeP(index, item) {
      // 路由跳转
      this.$emit('routeP', index, item)
    },
    handleCloseIcon(res) {
      console.log('res===>', res)
      if (!this.value) {
        return
      }
      if(!res) {
        return 
      }
      for (let key in this.value) {
        // 清空数据 v-model
        if (res[0][key]) {
          if (utils.assertType(this.value[key], 'Array')) {
            this.$set(this.value, key, [])
          }
          if (utils.assertType(this.value[key], 'Object')) {
            this.$set(this.value, key, {})
          }
          if (utils.assertType(this.value[key], 'Number')) {
            this.$set(this.value, key, null)
          }
          if (utils.assertType(this.value[key], 'String')) {
            this.$set(this.value, key, '')
          }
        }
      }
    },
    handlerSearchParams(data) {
      // 处理数据成需要的数据格式
      let dataInfo = data['dataInfo']
      let fields = data['fields']
      if(!fields) {
        return 
      }
      let searchP = {}
      let arr = []
      for (let key in dataInfo) {
        if (
          utils.isArrayEmpty(dataInfo[key]) ||
          utils.assertType(dataInfo[key], 'Object')
        ) {
          // 如果是 空字符串''，null，undefined，[], {} 跳过不处理
          continue
        }
        if (fields[key]['fieldEnname'] === key) {
          // console.log("fields[key].scopeKey", fields[key].scopeKey)
          if (fields[key].scopeKey === 'backField') {
            // 结束字段不处理
            // 在起始字段统一处理
              let last = (dataInfo[key] ? dataInfo[key] : '')
              let options = last
              // 判断需要跳过 起始输入框
              if(!dataInfo[fields[key].scopeStart] && dataInfo[key]) {
                searchP[key] = {
                  label: fields[key]['fieldName'],
                  options: options,
                  [key]: key
                }
              }   
          }
          if (fields[key].scopeKey !== 'backField') {
            let last = null
            // 判断起始字段中的 scopeKey 是否等于 key
            // 判断是否为日期，单独处理
            // fields[key].scopeKey 有可能为 undefined
            // console.log("fields[key].fieldType",fields[key])
            if (fields[key].fieldType == 10) {
              last = fields[key].scopeKey
                ? '~' +
                  dateModeTransform.dateModeTransform(
                    dataInfo[fields[key].scopeKey],
                  )
                : ''
              searchP[key] = {
                label: fields[key]['fieldName'],
                options:
                  dateModeTransform.dateModeTransform(dataInfo[key]) +
                  last +
                  '',
              }
            } else {
              // 像数字，金额范围，用户如果只输入一个需要判断处理
              // 这里验证用户
              last = (fields[key].scopeKey && dataInfo[fields[key].scopeKey])
                ? dataInfo[fields[key].scopeKey]
                : ''
              let start = (dataInfo[key] ? dataInfo[key] : '')
              let options = null
              if(start && last) {
                // 用户两个输入框都输入
                options = `${start} ~ ${last}`
              }
              if(start && !last) {
                // 用户只填第一个输入框
                options = `${start}`
              }
              console.log("options====>", options, fields[key].scopeKey)
              searchP[key] = {
                label: fields[key]['fieldName'],
                options: options,
                [fields[key].scopeKey]: key
              }
            }
          }
          // 处理那个 多选框，单选框，下拉框
          if (utils.assertType(fields[key]['categoryGroup'], 'Array')) {
            let categoryGroups = fields[key]['categoryGroup']
            let values = dataInfo[key]
            if (utils.assertType(values, 'Array')) {
              // values 为数组
              if (!values.length) {
                // 空数组，就什么都不做
              } else {
                // values 非空数组
                categoryGroups.filter(item => {
                  if (values.indexOf(item.keyValue) != -1) {
                    arr.push(item.keyName)
                  }
                })
                searchP[key] = {
                  label: fields[key]['fieldName'],
                  options: arr,
                }
              }
            } else {
              // values 不是数组，只是字符串
              categoryGroups.filter((item, index) => {
                if (item.keyValue === values) {
                  searchP[key] = {
                    label: fields[key]['fieldName'],
                    options: item.keyName,
                  }
                }
              })
            }
          }
        } else {
          continue
        } 
      }
      console.log("search===>222", searchP)
      return searchP
    },
    pushSearchResult(val) {
      let fields = val['fields']
      let dataInfo = val['dataInfo']
      val = this.handlerSearchParams(val)
      // 这里记得清空数据，不然会导致删除的数据紊乱
      this.searchResultList = []
      this.cacheList = []
      for (let key in val) {
        if (utils.assertType(val[key]['options'], 'Array')) {
          let arrStr = arrayToStringUtil.handleTags(
            JSON.stringify(val[key]['options']),
          )
          // 空字符串处理
          if (!arrStr) {
            return
          }
          let label = val[key]['label'],
            keyValue = `${label}: ${arrStr}`
          this.searchResultList.push(keyValue)
          // 添加判断，如果是范围类型，就返回两个键值
          // isShow是指定让右边的关闭按钮是否出现的标志
          if (
            fields[key].scopeKey !== 'backField' &&
            !utils.isEmpty(fields[key].scopeKey)
          ) {
            this.cacheList.push({
              [key]: `${dataInfo[key]}`,
              [fields[key].scopeKey]: `${dataInfo[fields[key].scopeKey]}`,
              isShow: (this.notAllowDeleteKeys.indexOf(key) !=-1 ? false : true)
            })
          } else {
            this.cacheList.push({ 
              [key]: `${dataInfo[key]}`, 
              isShow: (this.notAllowDeleteKeys.indexOf(key) !=-1 ? false : true) 
            })
          }
        } else {
          // 剔除 options 为空的情况
          if (val[key]['options']) {
            let item = `${val[key]['label']}: ${val[key]['options']}`
            this.searchResultList.push(item)
            if (
              fields[key].scopeKey !== 'backField' &&
              !utils.isEmpty(fields[key].scopeKey)
            ) {
              this.cacheList.push({
                [key]: `${val[key]['options']}`,
                [fields[key].scopeKey]: `${dataInfo[fields[key].scopeKey]}`,
                isShow: (this.notAllowDeleteKeys.indexOf(key) !=-1 ? false : true) 
              })
            } else {
              this.cacheList.push({ 
                [key]: `${dataInfo[key]}`,
                isShow: (this.notAllowDeleteKeys.indexOf(key) !=-1 ? false : true) 
             })
            }
          }
        }
      }
      console.log('alllow===>', this.cacheList)
    },
    closeSearchRestult(index) {
      let retVal = null
      const ele = this.cacheList[index]
      const eleKey = Object.keys(ele)[0]
      // 判断点击的那个项是否存在于传进来的 notAllowDeleteKeys 数组里面
      // 存在就不删除
      // 否则就删除
      if (this.notAllowDeleteKeys.length && (this.notAllowDeleteKeys.indexOf(eleKey)!=-1)) {
        return null
      } else {
        this.searchResultList.splice(index, 1)
        retVal = this.cacheList.splice(index, 1)
        return retVal
      } 
    }
  },
  computed: {
    dataList() {
      return this.searchResultList
    },
  },
  watch: {
    searchParams: {
      handler: function(newVal) {
        this.pushSearchResult(newVal)
      },
      deep: true
    },
    searchParamsTemp: {
      handler: function(newVal) {
        console.log("newVal", newVal)
      },
      deep: true
    }
  },
}
</script>
<style lang="scss" scoped>
@import '~@css/components/searchResult/searchResult.scss';
</style>